<template>
  <div class="app-container">
    <!-- 顶部操作栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:task:add']"
        >新增任务</el-button>
      </el-col>
      
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete"
          v-hasPermi="['system:task:remove']"
        >删除任务</el-button>
      </el-col>
      
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
          v-hasPermi="['system:task:edit']"
        >修改任务</el-button>
      </el-col>
      
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:task:export']"
        >导出</el-button>
      </el-col>
      
      <!-- 筛选区域 -->
      <el-col :span="6">
        <el-input
          v-model="taskSearchKeyword"
          placeholder="请输入任务名称搜索"
          size="small"
          clearable
          @input="filterTaskList"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
      
      <el-col :span="6">
        <el-input
          v-model="personSearchKeyword"
          placeholder="请输入被评议人姓名搜索"
          size="small"
          clearable
          @input="filterPersonList"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </el-col>
    </el-row>

    <!-- 主要内容区域 - 左右分栏 -->
    <div class="main-content">
      <!-- 左侧任务列表 -->
      <div class="left-panel">
        <div class="panel-header">
          <h3>任务列表</h3>
        </div>
        <div class="task-list-container">
          <div 
            v-for="task in (filteredTaskList || [])" 
            :key="task.id"
            :class="['task-item', { 'active': selectedTask && selectedTask.id === task.id }]"
            @click="selectTask(task)"
          >
            <span class="task-name">{{ task.taskName }}</span>
          </div>
          <div v-if="filteredTaskList && filteredTaskList.length === 0" class="empty-tip">
            暂无任务数据
          </div>
        </div>
      </div>

      <!-- 右侧被评议人列表 -->
      <div class="right-panel">
        <div class="panel-header">
          <h3>被评议人列表</h3>
          <div class="header-controls">
            <span v-if="selectedTask" class="task-info">当前任务：{{ selectedTask.taskName }}</span>
          </div>
        </div>
        <div class="person-list-container">
          <el-table v-loading="personLoading" :data="filteredPersonList" style="width: 100%">
            <el-table-column label="姓名" align="center" prop="name"/>
            <el-table-column label="照片" align="center">
              <template slot-scope="scope">
                <el-avatar 
                  :size="50" 
                  :src="scope.row.photo" 
                  :alt="scope.row.name"
                >
                  <img src="@/assets/images/profile.jpg" />
                </el-avatar>
              </template>
            </el-table-column>
            <el-table-column label="职务" align="center" prop="position" />
            <el-table-column label="评议人数量" align="center" width="100">
              <template slot-scope="scope">
                <el-tag type="info" size="small">{{ scope.row.reviewerCount || 1 }}人</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="得分" align="center" prop="score" width="80">
              <template slot-scope="scope">
                <span class="score">{{ scope.row.score || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="showReviewers(scope.row)"
                >评议人</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="!selectedTask" class="empty-tip">
            请选择左侧任务查看被评议人
          </div>
        </div>
      </div>
    </div>

    <!-- 评议人列表弹窗 -->
    <el-dialog 
      :title="`评议人列表 - ${currentPerson ? currentPerson.name : ''}`" 
      :visible.sync="reviewerDialogVisible" 
      width="900px" 
      append-to-body
    >
      <div class="reviewer-header">
        <el-form :inline="true" size="small">
          <el-form-item label="评议状态">
            <el-select v-model="reviewerFilter" placeholder="请选择状态" clearable>
              <el-option label="全部" value="" />
              <el-option label="已评议" value="reviewed" />
              <el-option label="未评议" value="unreviewed" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="filterReviewers">筛选</el-button>
            <el-button @click="resetReviewerFilter">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table 
        v-loading="reviewerLoading" 
        :data="filteredReviewerList" 
        @selection-change="handleReviewerSelectionChange"
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="评议人姓名" align="center" prop="name" width="120" />
        <el-table-column label="单位" align="center" prop="unit" />
        <el-table-column label="是否评议" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.isReviewed ? 'success' : 'warning'">
              {{ scope.row.isReviewed ? '已评议' : '未评议' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="评议结果" align="center" prop="result" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.isReviewed">
              <el-tag 
                :type="getResultTagType(scope.row.result)"
                size="small"
              >
                {{ scope.row.result || '-' }}
              </el-tag>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope">
            <el-button
              v-if="!scope.row.isReviewed"
              size="mini"
              type="primary"
              @click="pushSingleReviewer(scope.row)"
            >推送</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div slot="footer" class="dialog-footer">
        <el-button 
          type="primary" 
          :disabled="!selectedReviewers || selectedReviewers.length === 0"
          @click="pushMultipleReviewers"
        >批量推送</el-button>
        <el-button @click="reviewerDialogVisible = false">关闭</el-button>
      </div>
    </el-dialog>

    <!-- 添加或修改任务对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="任务名称" prop="taskName">
              <el-input v-model="form.taskName" placeholder="请输入任务名称" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="选择被评议人" prop="selectedPersons" class="person-selection">
          <div class="person-selection-header">
            <el-button type="primary" size="small" @click="showPersonSelector">
              <i class="el-icon-plus"></i> 选择被评议人
            </el-button>
            <span class="selected-count">已选择 {{ (form.selectedPersons && form.selectedPersons.length) || 0 }} 人</span>
          </div>
          
          <!-- 已选择的被评议人列表 -->
          <div class="selected-persons-list" v-if="form.selectedPersons && form.selectedPersons.length > 0">
            <el-card v-for="person in (form.selectedPersons || [])" :key="person.id" class="person-card">
              <div class="person-info">
                <div class="person-avatar">
                  <el-image
                    v-if="person.url"
                    :src="imgBeforeUrl(person.url)"
                    :preview-src-list="[imgBeforeUrl(person.url)]"
                    fit="cover"
                    style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer;"
                  >
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline"></i>
                    </div>
                  </el-image>
                  <el-avatar v-else icon="el-icon-user" size="small"></el-avatar>
                </div>
                <div class="person-details">
                  <div class="person-name">{{ person.name }}</div>
                  <div class="person-position">{{ person.position }}</div>
                  <!-- <div class="person-unit">{{ person.unit }}</div> -->
                </div>
                <div class="person-controls">
                  <div class="reviewer-count-input">
                    <label>随机评议人数量：</label>
                    <el-input-number 
                      v-model="person.reviewerCount" 
                      :min="1" 
                      :max="200"
                      size="mini"
                      style="width: 120px"
                      placeholder="数量"
                    />
                  </div>
                  <el-button 
                    type="danger" 
                    size="mini" 
                    icon="el-icon-delete"
                    @click="removePerson(person)"
                    class="remove-btn"
                  ></el-button>
                </div>
              </div>
            </el-card>
          </div>
          
          <div v-else class="empty-persons">
            <i class="el-icon-user"></i>
            <p>请点击上方按钮选择被评议人</p>
          </div>
        </el-form-item>
        
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 被评议人选择器弹窗 -->
    <el-dialog 
      title="选择被评议人" 
      :visible.sync="personSelectorVisible" 
      width="1000px" 
      append-to-body
      :before-close="closePersonSelector"
    >
      <div class="person-selector-content">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-form :inline="true" size="small">
            <el-form-item label="姓名">
              <el-input v-model="personSearch.name" placeholder="请输入姓名" clearable />
            </el-form-item>
            <!-- <el-form-item label="单位">
              <el-input v-model="personSearch.unit" placeholder="请输入单位" clearable />
            </el-form-item> -->
            <el-form-item label="职务">
              <el-input v-model="personSearch.position" placeholder="请输入职务" clearable />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchPersons">搜索</el-button>
              <el-button @click="resetPersonSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 批量操作栏 -->
        <div class="batch-actions">
          <el-button type="primary" size="small" @click="selectAllPersons">全选</el-button>
          <el-button type="danger" size="small" @click="clearAllPersons">清空</el-button>
        </div>
        
        <!-- 人员列表 -->
        <div class="person-list-wrapper">
          <el-table 
            ref="personTable"
            v-loading="personSelectorLoading" 
            :data="availablePersons" 
            @selection-change="handlePersonSelectionChange"
            style="width: 100%"
            height="400"
          >
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="照片" align="center">
              <template slot-scope="scope">
                <el-image
                  v-if="scope.row.url"
                  :src="imgBeforeUrl(scope.row.url)"
                  :preview-src-list="[imgBeforeUrl(scope.row.url)]"
                  fit="cover"
                  style="width: 40px; height: 40px; border-radius: 50%; cursor: pointer;"
                >
                  <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                  </div>
                </el-image>
                <el-avatar v-else icon="el-icon-user" size="small"></el-avatar>
              </template>
            </el-table-column>
            <el-table-column label="姓名" align="center" prop="name" width="100" />
            <!-- <el-table-column label="单位" align="center" prop="unit" /> -->
            <el-table-column label="职务" align="center" prop="position" />
            <!-- <el-table-column label="联系方式" align="center" prop="phone" width="120" /> -->
            <el-table-column label="备注" align="center" prop="remark" min-width="150" :show-overflow-tooltip="{ maxWidth: '80%' }">
              <template slot-scope="scope">
                <div v-if="scope.row.remark" class="remark-cell" @click="showRemarkDetail(scope.row.remark)">
                  <span class="remark-text">{{ scope.row.remark }}</span>
                  <i class="el-icon-view remark-icon"></i>
                </div>
                <span v-else class="text-muted">无</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <span class="selection-info">已选择 {{ (selectedPersonsForSelector && selectedPersonsForSelector.length) || 0 }} 人</span>
        <el-button @click="closePersonSelector">取 消</el-button>
        <el-button type="primary" @click="confirmPersonSelection">确 定</el-button>
      </div>
    </el-dialog>

     <!-- 备注详情对话框 -->
     <el-dialog title="备注详情" :visible.sync="remarkDialogVisible" width="500px" append-to-body>
      <div class="remark-detail-content">
        <p>{{ currentRemark }}</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="remarkDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { listTask, getTask, delTask, addTask, updateTask, listTaskPersons, listReviewers, pushReviewTask, listAvailablePersons } from "@/api/system/task"
import { listBpyr } from "@/api/system/bpyr";
import { beforeUrl } from "@/utils"

export default {
  name: "Task",
  data() {
    return {
      // 遮罩层
      loading: false,
      personLoading: false,
      reviewerLoading: false,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 任务表格数据
      taskList: [],
      // 筛选后的任务列表
      filteredTaskList: [],
      // 当前选中的任务
      selectedTask: null,
      // 被评议人列表 - 按任务分组
      personListByTask: {},
      // 当前任务的被评议人列表
      personList: [],
      // 评议人列表
      reviewerList: [],
      // 筛选后的评议人列表
      filteredReviewerList: [],
      // 评议人筛选条件
      reviewerFilter: '',
      // 选中的评议人
      selectedReviewers: [],
      // 评议人弹窗显示状态
      reviewerDialogVisible: false,
      // 当前查看的被评议人
      currentPerson: null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        taskName: null,
      },
      // 表单参数
      form: {
        id: null,
        taskName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        selectedPersons: []
      },
      // 表单校验
      rules: {
        taskName: [
          { required: true, message: "任务名称不能为空", trigger: "blur" }
        ],
        selectedPersons: [
          { 
            validator: (rule, value, callback) => {
              if (!value || value.length === 0) {
                callback(new Error('请选择被评议人'))
              } else {
                // 检查每个被评议人是否都设置了评议人数量
                for (let i = 0; i < value.length; i++) {
                  const person = value[i]
                  if (!person.reviewerCount || person.reviewerCount < 1) {
                    callback(new Error(`请为 ${person.name} 设置评议人数量`))
                    return
                  }
                }
                callback()
              }
            }, 
            trigger: "change" 
          }
        ]
      },
      // 被评议人选择器相关
      personSelectorVisible: false,
      personSearch: {
        name: '',
        unit: '',
        position: ''
      },
      personSelectorLoading: false,
      availablePersons: [],
      selectedPersonsForSelector: [],
      personSearchKeyword: '',
      filteredPersonList: [],
      taskSearchKeyword: '',
      // 备注详情对话框
      remarkDialogVisible: false,
      // 当前备注内容
      currentRemark: "",
    }
  },
  created() {
    // 获取任务列表
    this.getList()
  },
  methods: {
    /** 查询任务列表 */
    getList() {
      this.loading = true
      listTask(this.queryParams).then(response => {
        this.taskList = response.rows || []
        this.filteredTaskList = [...this.taskList]
        this.total = response.total || 0
        this.loading = false
        // 默认选中第一个任务
        if (this.filteredTaskList && this.filteredTaskList.length > 0 && !this.selectedTask) {
          this.selectTask(this.filteredTaskList[0])
        }
      }).catch(() => {
        this.loading = false
        this.taskList = []
        this.filteredTaskList = []
        this.total = 0
      })
    },
    
    /** 选择任务 */
    selectTask(task) {
      this.selectedTask = task
      this.getPersonList(task.id)
      // 重置搜索关键词并更新筛选列表
      this.personSearchKeyword = ''
      this.filteredPersonList = [...this.personList]
    },
    
    /** 获取被评议人列表 */
    getPersonList(taskId) {
      this.personLoading = true
      listTaskPersons(taskId).then(response => {
        this.personList = response.rows || []
        // 更新筛选后的列表
        this.filteredPersonList = [...this.personList]
        this.personLoading = false
      }).catch(error => {
        console.error('获取被评议人列表失败:', error)
        this.personList = []
        this.filteredPersonList = []
        this.personLoading = false
        this.$modal.msgError('获取被评议人列表失败')
      })
    },
    
    /** 显示评议人列表 */
    showReviewers(person) {
      this.currentPerson = person
      this.reviewerDialogVisible = true
      this.reviewerLoading = true
      
      // 调用接口获取评议人列表
      listReviewers(person.id).then(response => {
        this.reviewerList = response.rows || []
        this.filteredReviewerList = [...this.reviewerList]
        this.reviewerLoading = false
      }).catch(error => {
        console.error('获取评议人列表失败:', error)
        this.reviewerList = []
        this.filteredReviewerList = []
        this.reviewerLoading = false
        this.$modal.msgError('获取评议人列表失败')
      })
    },
    
    /** 筛选评议人 */
    filterReviewers() {
      if (!this.reviewerFilter) {
        this.filteredReviewerList = [...this.reviewerList]
      } else {
        this.filteredReviewerList = this.reviewerList.filter(item => {
          if (this.reviewerFilter === 'reviewed') {
            return item.isReviewed
          } else if (this.reviewerFilter === 'unreviewed') {
            return !item.isReviewed
          }
          return true
        })
      }
    },
    
    /** 重置评议人筛选 */
    resetReviewerFilter() {
      this.reviewerFilter = ''
      this.filteredReviewerList = [...this.reviewerList]
    },
    
    /** 评议人选择变化 */
    handleReviewerSelectionChange(selection) {
      this.selectedReviewers = selection
    },
    
    /** 单个推送评议人 */
    pushSingleReviewer(reviewer) {
      this.pushReviewers([reviewer])
    },
    
    /** 批量推送评议人 */
    pushMultipleReviewers() {
      this.pushReviewers(this.selectedReviewers)
    },
    
    /** 推送评议人 */
    pushReviewers(reviewers) {
      if (reviewers.length === 0) {
        this.$modal.msgWarning("请选择要推送的评议人")
        return
      }
      
      this.$modal.confirm('确认推送评议任务给选中的评议人？').then(() => {
        this.reviewerLoading = true
        
        // 准备推送数据
        const pushData = {
          personId: this.currentPerson.id,
          taskId: this.selectedTask.id,
          reviewerIds: reviewers.map(reviewer => reviewer.id)
        }
        
        // 调用推送接口
        pushReviewTask(pushData).then(response => {
          this.reviewerLoading = false
          this.$modal.msgSuccess("推送成功")
          
          // 重新获取评议人列表以更新状态
          this.showReviewers(this.currentPerson)
        }).catch(error => {
          console.error('推送评议任务失败:', error)
          this.reviewerLoading = false
          this.$modal.msgError('推送评议任务失败')
        })
      })
    },
    
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        taskName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        selectedPersons: []
      }
      this.resetForm("form")
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm")
      this.handleQuery()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = "添加任务"
    },
    /** 修改按钮操作 */
    handleUpdate() {
      if (!this.selectedTask) {
        this.$modal.msgWarning("请先选择要修改的任务")
        return
      }
      this.reset()
      // 获取任务详情
      this.loading = true
      getTask(this.selectedTask.id).then(response => {
        this.loading = false
        this.form = {
          id: response.data.id,
          taskName: response.data.taskName,
          createBy: response.data.createBy,
          createTime: response.data.createTime,
          updateBy: response.data.updateBy,
          updateTime: response.data.updateTime,
          remark: response.data.remark,
          selectedPersons: response.data.selectedPersons || []
        }
        this.open = true
        this.title = "修改任务"
      }).catch(error => {
        console.error('获取任务详情失败:', error)
        this.loading = false
        this.$modal.msgError('获取任务详情失败')
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          if (this.form.id != null) {
            // 修改任务
            updateTask(this.form).then(response => {
              this.loading = false
              this.$modal.msgSuccess("修改成功")
              this.open = false
              // 重新获取任务列表
              this.getList()
            }).catch(error => {
              console.error('修改任务失败:', error)
              this.loading = false
              this.$modal.msgError('修改任务失败')
            })
          } else {
            // 新增任务
            addTask(this.form).then(response => {
              this.loading = false
              this.$modal.msgSuccess("新增成功")
              this.open = false
              // 重新获取任务列表
              this.getList()
            }).catch(error => {
              console.error('新增任务失败:', error)
              this.loading = false
              this.$modal.msgError('新增任务失败')
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete() {
      if (!this.selectedTask) {
        this.$modal.msgWarning("请先选择要删除的任务")
        return
      }
      this.$modal.confirm('是否确认删除任务"' + this.selectedTask.taskName + '"？').then(() => {
        this.loading = true
        delTask(this.selectedTask.id).then(response => {
          this.loading = false
          this.$modal.msgSuccess("删除成功")
          // 重新获取任务列表
          this.getList()
          this.selectedTask = null
          this.personList = []
          this.filteredPersonList = []
        }).catch(error => {
          console.error('删除任务失败:', error)
          this.loading = false
          this.$modal.msgError('删除任务失败')
        })
      }).catch(() => {})
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/task/export', {
        ...this.queryParams
      }, `${this.selectedTask.taskName}_${new Date().getTime()}.xlsx`)
    },
    
    // 被评议人选择器相关方法
    showPersonSelector() {
      this.personSelectorVisible = true
      this.selectedPersonsForSelector = []
      this.loadAvailablePersons()
      // 重置表格选择状态
      this.$nextTick(() => {
        if (this.$refs.personTable) {
          this.$refs.personTable.clearSelection()
        }
      })
    },
    
    closePersonSelector() {
      this.personSelectorVisible = false
      this.selectedPersonsForSelector = []
    },
    
    loadAvailablePersons() {
      this.personSelectorLoading = true
      
      // 构建查询参数
      const queryParams = {}
      if (this.personSearch.name) {
        queryParams.name = this.personSearch.name
      }
      if (this.personSearch.unit) {
        queryParams.unit = this.personSearch.unit
      }
      if (this.personSearch.position) {
        queryParams.position = this.personSearch.position
      }
      
      // 调用接口获取可用人员列表
      listBpyr(queryParams).then(response => {
        this.availablePersons = response.rows || []
        this.personSelectorLoading = false
      }).catch(error => {
        console.error('获取可用人员列表失败:', error)
        this.availablePersons = []
        this.personSelectorLoading = false
        this.$modal.msgError('获取可用人员列表失败')
      })
    },
    
    searchPersons() {
      this.loadAvailablePersons()
    },
    
    resetPersonSearch() {
      this.personSearch = {
        name: '',
        unit: '',
        position: ''
      }
      // 重新获取原始数据
      this.loadAvailablePersons()
    },
    
    handlePersonSelectionChange(selection) {
      this.selectedPersonsForSelector = selection
    },
    
    confirmPersonSelection() {
      // 为每个被评议人添加默认的评议人数量
      const personsWithReviewerCount = this.selectedPersonsForSelector.map(person => ({
        ...person,
        reviewerCount: person.reviewerCount || 80 // 默认值为80
      }))
      
      this.form.selectedPersons = [...personsWithReviewerCount]
      this.personSelectorVisible = false
      // 触发表单验证
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          this.$refs["form"].validateField('selectedPersons')
        }
      })
    },
    
    // 批量操作方法
    selectAllPersons() {
      // 全选所有可用人员
      this.$nextTick(() => {
        this.availablePersons.forEach(row => {
          this.$refs.personTable.toggleRowSelection(row, true)
        })
      })
    },
    
    clearAllPersons() {
      // 清空所有选择
      this.$nextTick(() => {
        this.$refs.personTable.clearSelection()
      })
    },
    
    
    removePerson(person) {
      if (this.form.selectedPersons) {
        this.form.selectedPersons = this.form.selectedPersons.filter(p => p.id !== person.id)
      }
    },

    getResultTagType(result) {
      if (!result) return ''
      
      switch (result) {
        case '优秀':
          return 'success'
        case '称职':
          return 'primary'
        case '基本称职':
          return 'warning'
        case '不称职':
          return 'danger'
        case '不了解':
          return 'info'
        default:
          return ''
      }
    },

    getScoreTagType(score) {
      if (!score) return ''
      
      switch (score) {
        case '优秀':
          return 'success'
        case '称职':
          return 'primary'
        case '基本称职':
          return 'warning'
        case '不称职':
          return 'danger'
        case '不了解':
          return 'info'
        default:
          return ''
      }
    },

    filterPersonList() {
      if (!this.personList) {
        this.filteredPersonList = []
        return
      }
      
      if (!this.personSearchKeyword || this.personSearchKeyword.trim() === '') {
        this.filteredPersonList = [...this.personList]
        return
      }
      
      const keyword = this.personSearchKeyword.toLowerCase().trim()
      this.filteredPersonList = this.personList.filter(person => 
        person.name && person.name.toLowerCase().includes(keyword)
      )
    },

    filterTaskList() {
      if (!this.taskList) {
        this.filteredTaskList = []
        return
      }
      
      if (!this.taskSearchKeyword || this.taskSearchKeyword.trim() === '') {
        this.filteredTaskList = [...this.taskList]
        return
      }
      
      const keyword = this.taskSearchKeyword.toLowerCase().trim()
      this.filteredTaskList = this.taskList.filter(task => 
        task.taskName && task.taskName.toLowerCase().includes(keyword)
      )
    },
    imgBeforeUrl(url) {
      return beforeUrl(url)
    },
    // 显示备注详情
    showRemarkDetail(remark) {
      this.currentRemark = remark
      this.remarkDialogVisible = true
    }
  }
}
</script>

<style scoped>
.main-content {
  display: flex;
  height: calc(100vh - 200px);
  gap: 20px;
}

.left-panel {
  width: 300px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.right-panel {
  flex: 1;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
}

.panel-header {
  padding: 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.panel-header h3 {
  margin: 0;
  font-size: 16px;
  color: #303133;
}

.task-info {
  font-size: 12px;
  color: #909399;
  white-space: nowrap;
}

.task-list-container {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.task-item {
  padding: 12px 15px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.task-item:hover {
  background-color: #f5f7fa;
  border-color: #409eff;
}

.task-item.active {
  background-color: #ecf5ff;
  border-color: #409eff;
  color: #409eff;
}

.task-name {
  font-size: 14px;
  font-weight: 500;
}

.person-list-container {
  flex: 1;
  padding: 15px;
  overflow-y: auto;
}

.empty-tip {
  text-align: center;
  color: #909399;
  padding: 40px 0;
  font-size: 14px;
}

.score {
  font-weight: bold;
  color: #409eff;
}

.reviewer-header {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.reviewer-info {
  margin-top: 10px;
}

/* 滚动条样式 */
.task-list-container::-webkit-scrollbar,
.person-list-container::-webkit-scrollbar {
  width: 6px;
}

.task-list-container::-webkit-scrollbar-track,
.person-list-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.task-list-container::-webkit-scrollbar-thumb,
.person-list-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.task-list-container::-webkit-scrollbar-thumb:hover,
.person-list-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 被评议人选择器样式 */
.person-selection {
  margin-bottom: 20px;
}

.person-selection-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.selected-count {
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
  padding: 4px 12px;
  background-color: #ecf5ff;
  border-radius: 4px;
  border: 1px solid #d9ecff;
}

.selected-persons-list {
  max-height: 350px;
  overflow-y: auto;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 12px;
  background-color: #fafafa;
}

.selected-persons-list::-webkit-scrollbar {
  width: 6px;
}

.selected-persons-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.selected-persons-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.selected-persons-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.person-card {
  margin-bottom: 12px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.3s ease;
}

.person-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.person-card:last-child {
  margin-bottom: 0;
}

.person-card .el-card__body {
  padding: 16px;
  display: flex;
  align-items: center;
}

.person-info {
  display: flex;
  align-items: center;
  gap: 15px;
}

.person-avatar {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.person-details {
  flex: 1;
  min-width: 0;
}

.person-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
  line-height: 1.2;
}

.person-position {
  font-size: 14px;
  color: #606266;
  line-height: 1.3;
}

.person-unit {
  font-size: 12px;
  color: #909399;
  line-height: 1.2;
}

.person-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: nowrap;
}

.reviewer-count-input {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.reviewer-count-input label {
  font-size: 12px;
  color: #606266;
  white-space: nowrap;
  flex-shrink: 0;
}

.remove-btn {
  flex-shrink: 0;
}

.empty-persons {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
  border: 2px dashed #e4e7ed;
  border-radius: 4px;
  background-color: #fafafa;
}

.empty-persons i {
  font-size: 48px;
  margin-bottom: 10px;
  display: block;
}

.empty-persons p {
  margin: 0;
  font-size: 14px;
}

.person-selector-content {
  padding: 20px;
}

.search-bar {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e4e7ed;
}

.batch-actions {
  margin-bottom: 15px;
  padding: 12px 16px;
  background-color: #f5f7fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
}

.batch-info {
  margin-left: auto;
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
  padding: 4px 12px;
  background-color: #ecf5ff;
  border-radius: 4px;
  border: 1px solid #d9ecff;
}

.person-list-wrapper {
  height: 400px;
  overflow-y: auto;
}

.selection-info {
  margin-right: 15px;
  font-size: 14px;
  color: #409eff;
  font-weight: 500;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 顶部操作栏样式优化 */
.mb8 {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
}

.mb8 .el-col {
  display: flex;
  align-items: center;
}

.mb8 .el-input {
  width: 100%;
}

.mb8 .el-input__inner {
  border-radius: 4px;
}

.mb8 .el-input__prefix {
  color: #909399;
}


/* 备注单元格样式 */
.remark-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.3s;
  max-width: 100%;
}

.remark-cell:hover {
  background-color: #f5f7fa;
}

.remark-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #606266;
  font-size: 13px;
  line-height: 1.4;
}

.remark-icon {
  color: #409eff;
  font-size: 14px;
  margin-left: 8px;
  flex-shrink: 0;
}

.remark-cell:hover .remark-icon {
  color: #66b1ff;
}

/* 备注详情对话框样式 */
.remark-detail-content {
  padding: 20px;
  background-color: #fafafa;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
}

.remark-detail-content p {
  margin: 0;
  line-height: 1.6;
  color: #606266;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>
